<template>
  <div>
    <input type="file" @change="uploadFile($event)" multiple="multiple" />
  </div>
</template>
 
<script>
export default {
  name: "upload",
  data() {
    return {
      imgInfo: {},
    };
  },
  methods: {
    uploadFile(event) {
      let that = this;
      let file = event.target.files[0];
      console.log(file);
      let fileReader = new FileReader();
      fileReader.readAsDataURL(file); //根据图片路径读取图片
      fileReader.onload = function (/* e */) {
        let base64 = this.result;
        let img = new Image();
        img.src = base64;
        img.onload = function () {
          that.imgInfo = {
            width: img.naturalWidth,
            height: img.naturalHeight,
          };
          console.log("宽：" + img.naturalWidth + " 高：" + img.naturalHeight);
        };
      };
    },
  },
};
</script>